<!--  -->
<template>
  <div class="card">
    <header>
      <span @click="$router.push('/layout/my')"><svg-icon iconClass="back"/></span>
      <span>银行卡</span>
      <span>...</span>
    </header>
    <main>
      <div class="cardBox">
        <b>建设银行</b>
        <span>储蓄卡</span>
      </div>
      <button @click="handleClick()">+添加银行卡</button>
    </main>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick() {
      alert("二次添加银行卡");
      this.$router.push("./addCard");
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss' scoped>
@import "@css/style.scss";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.card {
  width: 100%;
  height: 100%;
  font-size: px2rem(20);
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px2rem(50);
    border-bottom: 1px solid;
    padding: 0 px2rem(10);
  }
  main {
    flex: 1;
    padding: 0 px2rem(10);
    .cardBox {
      width: px2rem(355);
      height: px2rem(115);
      background: #316fa8;
      color: #fff;
      border-radius: px2rem(10);
      margin-top: px2rem(10);
      display: flex;
      flex-direction: column;
      padding: px2rem(23);
      b {
        font-size: px2rem(20);
      }
      span {
        font-size: px2rem(18);
      }
    }

    button {
      padding: px2rem(20) px2rem(133);
      border: 0;
      margin-top: px2rem(10);
      font-size: px2rem(14);
    }
  }
}
</style>